<template>
	<view class="container">
		<!-- 服务器IP输入框列表 -->
		<scroll-view scroll-y="true">
			<view class="container_list">
				<view :class="index=='0'?'container_list_firstIndex':'container_list_index'"
					v-for="(item,index) in serveList">
					<view class="container_list_btn">
						<!-- 控制IP选择开关 -->
						<switch :checked="item.switch" style="transform:scale(0.7)"
							@change="change(item,index,$event)" />
						<!-- 删除IP列表按钮 -->
						<text
							:class="item.switch==false?'container_list_btn_deleteTxt':'container_list_btn_deleteTxt_dis'"
							v-if="index!=0" @click="delServe(item,index)">{{$t('public.del')}}</text>
					</view>
					<!-- IP列表输入框 -->
					<view class="container_list_search">
						<zy-input preSlot :placeholder="$t('serve.pleaseInputIP')" v-model="item.ipAddress"
							:disabled="item.switch" @onInput="(e) => { onInput(e, item,index) }">
							<template>
								<text>http://</text>
							</template>
						</zy-input>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 底部添加按钮 -->
		<view class="container_bottomBtn">
			<button type="primary" @click="addServe" class="container_bottomBtn_add">{{$t('serve.add')}}</button>
		</view>
	</view>
</template>

<script>
	import service from "@/utils/request.js"
	import baseUrl from "@/utils/getIp.js"
	export default {
		watch: {
			serveList() {
				uni.setStorage({
					key: "serveList",
					data: this.serveList
				})
			},
		},
		created() {
			const value = uni.getStorageSync('serveList');
			if (value) {
				this.serveList = value
			}
		},
		data() {
			return {
				serveList: [{
					switch: true,
					ipPrefix: 'http://',
					ipAddress: '58.214.232.82:9000',
				}],
				zy_customSearch: {
					border: "1rpx solid #e9e9e9",
				},
				inputValue: '',
				inputIndex: '',
			};
		},
		methods: {
			onInput(e, item, index) {
				for (var i = 0; i < this.serveList.length; i++) {
					if (i == index) {
						this.serveList[i].ipAddress = e
					}
				}
			},
			// 开关选择器，控制只允许打开一个
			change(item, index, $event) {
				for (var i = 0; i < this.serveList.length; i++) {
					if (i == index) {
						this.serveList[i].switch = $event.detail.value
					} else {
						this.serveList[i].switch = false
					}
				}
				//缓存服务器
				uni.setStorage({
					key: "serveList",
					data: this.serveList,
					success: () => {
						this.reloadIp()
					}
				})
			},
			reloadIp() {
				uni.setStorageSync("serveList", this.serveList)
				const serveList = uni.getStorageSync('serveList');
				let arr = [];
				let baseUrl = ""
				if (serveList) {
					arr = serveList.filter((item) => {
						return item.switch
					})
					if (arr.length != 0) {
						baseUrl = arr[0].ipPrefix + arr[0].ipAddress;
					}
				}
				service.defaults.baseURL = baseUrl;
			},
			//删除选中的服务器
			delServe(item, index) {
				if (item.switch == false) {
					this.serveList.splice(index, 1)
				} else {
					uni.showToast({
						title: this.$t('serve.delTip'),
						icon: "none",
						duration: 3000
					})
				}
			},
			//添加服务器
			addServe() {
				this.serveList.push({
					switch: false,
					ipPrefix: 'http://',
					ipAddress: '',
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: calc(100% - 40rpx);
		margin: 20rpx;
	}

	.container_list {
		position: relative;
		padding-bottom: 140rpx;
	}

	.container_list_firstIndex {
		background-color: #fff;
		border-radius: 10rpx;
	}

	.container_list_index {
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
	}

	.container_list_btn {
		padding: 0 20rpx;
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		border-bottom: 0.59rpx solid #e9e9e9;
	}

	.container_list_btn_deleteTxt {
		color: red;
		margin-left: auto;
	}

	.container_list_btn_deleteTxt_dis {
		color: #999;
		margin-left: auto;
	}

	.container_list_search {
		// height: 160rpx;
		// line-height: 160rpx;
		padding: 30rpx 0;
	}

	.container_bottomBtn {
		bottom: 0;
		position: fixed;
		height: 120rpx;
		line-height: 120rpx;
		width: calc(100% - 40rpx);
		text-align: center;
		background-color: #f5f5f5;
		z-index: 999999;
	}

	.container_bottomBtn_add {
		border-radius: 100rpx;
	}
</style>